<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_4-弹球游戏</title>
</head>

<body>


    <!--载入vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./public/js/vue.global.js" type="text/javascript" charset="utf-8"></script>

    <div id="Application">
        <!--游戏区域-->
        <div class="container">
            <!--底部挡板-->
            <div class="board" :style="{left:boardX + 'px'}"></div>
            <!--弹球-->
            <div class="ball" :style="{left:ballX+'px',top:ballY+'px'}"></div>
            <!--游戏结束提示-->
            <h1 v-if="fail" style="text-align: center;">游戏结束</h1>
        </div>

    </div>



    <script>
        //定义组件
        const App = {
            //组件的data方法
            data() {
                //返回对象
                return {
                    //控制挡板位置
                    boardX: 0,
                    //控制弹球位置
                    ballX: 0,
                    ballY: 0,
                    //控制弹球移动速度
                    rateX: 0.6,
                    rateY: 0.6,
                    //控制结束游戏提示
                    fail: false,

                }
            },

            //组件生命周期函数，组件加载时会调用
            mounted() {
                //添加键盘事件
                this.enterKeyup();
                //随机弹球的运动速度和方向
                this.rateX = (Math.random() + 0.1)//生成随机的0>=X<1的数
                this.rateY = (Math.random() + 0.1)
                //开启计数器，控制弹球移动
                this.timer = setInterval(() => {//定时循环执行。毫秒，
                    //到达右侧边缘进行反弹
                    if (this.ballX + this.rateX >= 440 - 30) {//变化后，球的位置是否到达右边界
                        this.rateX *= -1
                    }
                    //到达左侧边缘进行反弹
                    if (this.ballX + this.rateX <= 0) {
                        this.rateX *= -1
                    }

                    //到达上侧边缘进行反弹
                    if (this.ballY + this.rateY <= 0) {
                        this.rateY *= -1
                    }
                    this.ballX += this.rateX//当前X位置
                    this.ballY += this.rateY//当前Y位置
                    //失败判定
                    if (this.ballY >= 440 - 30 - 10) {//总高度-球半径-挡板高度
                        //挡板接住了弹球，进行反弹
                        if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {//球X的值是否在挡板X值内
                            this.rateY *= -1
                        } else {
                            //没有接住弹球,游戏结束
                            clearInterval(this.timer)//销毁定时器this.timer
                            this.fail = true
                        }
                    }
                }, 5)
            },

            //计算属性
            computed: {

            },

            //定义组件的函数
            methods: {
                //控制挡板移动
                keydown(event) {//键盘按下
                    if (event.key == "ArrowLeft") {//event对象监听
                        if (this.boardX > 10) {
                            this.boardX -= 20//每按一次向左移动20
                        }
                    } else if (event.key == "ArrowRight") {
                        if (this.boardX < 440 - 80) {
                            this.boardX += 20
                        }
                    }
                },
                enterKeyup() {
                    document.addEventListener("keydown", this.keydown);//向文档添加事件句柄（事件名称，函数）
                }
            }
        }

        Vue.createApp(App).mount("#Application")
    </script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }

        .ball {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0px;
            top: 0px;
            background-color: orange;
            border-radius: 30px;
        }

        .board {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: red;
        }
    </style>


</body>

</html>